package myJs.cps.project

import myJs.Implicits._
import myJs.api.Api
import myJs.cps.BootstrapTableCp.Column
import myJs.cps.{BootstrapTableCp, Style}
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import myJs.tool.Pojo.{CheckboxSearch, ExportData, NumericSearch, TextSearch}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.ReactElement
import slinky.web.html._
import typings.csstype.csstypeStrings
import upickle.default.{reader, writeJs}

import scala.collection.immutable.SeqMap
import scala.scalajs.js

/** Created by yz on 21/1/2022
  */
@react object CommunicationCp {

  case class Props(kind: String)

  val component = FunctionalComponent[Props] { props =>
    val (datas, setDatas) = useState(List.empty[ujson.Obj])
    val (columns, setColumns) = useState(List.empty[Column])

    object FTool {}

    val filePrefix = props.kind match {
      case "Viral Hepatitis" => "Viral_Hepatitis"
      case x => x
    }

    div(
      style := Style(),
      h5(
        style := Style(marginBottom = 15, fontSize = 16, marginTop = 15),
        id := "communication",
        "Cell Communication ", {
          val popover: ReactElement = Popover(id = "popover-basic")(
            Popover.Title("Note"),
            Popover.Content(
              "Heatmap showing significant interaction counts among cell types for each liver phenotype."
            )
          )
          OverlayTrigger(
            placement = "right",
            trigger = js.Array("focus", "hover"),
            overlay = popover
          )(
            span(
              a(`type` := "button", i(className := "fas fa-info-circle"))
            )
          )
        }
      ),
      if (props.kind == "All") {
        div(
          "Please select one specific phenotype in the left panel instead of the landscape view."
        )
      } else {
        div(
          div(
            style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
            div(
              style := Style(marginLeft = 5),
              className := "btn-group",
              a(
                title := "Export image",
                className := "btn  btn-default idsButton",
                data - "toggle" := "dropdown",
                data - "hover" := "dropdown",
                data - "close-others" := "true",
                aria - "expanded" := "false",
                i(className := "fa fa-bars")
              ),
              ul(
                className := "dropdown-menu pull-right",
                li(
                  a(
                    href := s"${Api.tool.downloadFile}/communication/${filePrefix}_heatmap_count.png",
                    "Download PNG image"
                  )
                )
              )
            )
          ),
          img(
            style := Style(marginLeft = 0, width = "80%"),
            className := "interAnnoImg",
            src := s"${Api.tool.pngImage}/communication/${filePrefix}_heatmap_count.png"
          )
        )
      }
    )

  }

  object STool {

    val myBtn =
      Style(cursor = csstypeStrings.pointer, marginBottom = 10, paddingTop = 3, paddingBottom = 3, marginRight = 15)

  }

}
